

.growing {
    width: 150px;
    height: 150px;
    position: relative;
    clip-path: inset(-100vh 0);
}

.growing::before {
    content: "";
    display: block;
    width: 400%;
    height: 100%;
    background:
        /* 1 */
        radial-gradient(farthest-side, #639510 97%, #0000) 12.5% 65%/12px 9px,
        linear-gradient(#996b52 0 0) 9% 80%/9.4% 9%,
        linear-gradient(#996b52 0 0) 10% 100%/7% 25%,
        linear-gradient(#639510 0 0) 12.5% 100%/5px 36%,
        /* 2 */
        radial-gradient(farthest-side, #639510 97%, #0000) 35.5% 50%/15px 10px,
        radial-gradient(farthest-side, #639510 97%, #0000) 38% 64%/15px 10px,
        linear-gradient(#996b52 0 0) 35.5% 80%/9.4% 9%,
        linear-gradient(#996b52 0 0) 36% 100%/7% 25%,
        linear-gradient(#639510 0 0) 37% 100%/5px 52%,
        /* 3 */
        radial-gradient(farthest-side, #fb3e4c 98%, #0000) 64.5% 40.5%/10px 9px,
        radial-gradient(farthest-side at bottom, #0000 calc(100% - 5px), #639510 0 100%, #0000) 63.6% 34%/20px 10px,
        radial-gradient(farthest-side, #639510 97%, #0000) 61% 50%/15px 10px,
        radial-gradient(farthest-side, #639510 97%, #0000) 63.5% 64%/15px 10px,
        linear-gradient(#996b52 0 0) 63.5% 80%/9.4% 9%,
        linear-gradient(#996b52 0 0) 63.1% 100%/7% 25%,
        linear-gradient(#639510 0 0) 62% 100%/5px 62%,
        /* 4 */
        radial-gradient(farthest-side at 50% 4px, #fb3e4c 98%, #0000) 88.1% 17.5%/17px 13px,
        radial-gradient(farthest-side, #639510 97%, #0000) 87% 50%/15px 10px,
        radial-gradient(farthest-side, #639510 97%, #0000) 89.5% 38%/15px 10px,
        radial-gradient(farthest-side, #639510 97%, #0000) 89.5% 64%/15px 10px,
        linear-gradient(#996b52 0 0) 91% 80%/9.4% 9%,
        linear-gradient(#996b52 0 0) 90% 100%/7% 25%,
        linear-gradient(#639510 0 0) 87.5% 100%/5px 77%;
    background-repeat: no-repeat;
    animation: m 4s .5s both;
}

.growing:after {
    content: "";
    position: absolute;
    inset: -100vh 49px 42px 54px;
    background:
        conic-gradient(at 2px 50%, #0000 270deg, #fff 0) 0 0/8px 10px,
        conic-gradient(at 2px 50%, #0000 270deg, #fff 0) 4px 5px/8px 10px;
    animation: s 4s .5s both;
}

@keyframes m {

    0%,
    20% {
        transform: translate(0%);
    }

    33.33%,
    53.33% {
        transform: translate(-24%);
    }

    66.66%,
    86.66% {
        transform: translate(-49.5%);
    }

    100% {
        transform: translate(-74.5%);
    }
}

@keyframes s {
    0% {
        inset: -100vh 49px 100vh 54px;
    }

    10% {
        inset: -100vh 49px 42px 54px;
        opacity: 1;
    }

    20% {
        inset: -100vh 49px 42px 54px;
        opacity: 0;
    }

    20.01%,
    33.33% {
        inset: -100vh 49px 100vh 54px;
        opacity: 1;
    }

    43.33% {
        inset: -100vh 49px 42px 54px;
        opacity: 1;
    }

    53.33% {
        inset: -100vh 49px 42px 54px;
        opacity: 0;
    }

    53.34%,
    66.66% {
        inset: -100vh 49px 100vh 54px;
        opacity: 1;
    }

    76.66% {
        inset: -100vh 49px 42px 54px;
        opacity: 1;
    }

    86.66%,
    100% {
        inset: -100vh 49px 42px 54px;
        opacity: 0;
    }
}